<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{width:140px;height:30px;line-height: 30px;background:#00f;
            color:#fff;font-size:14px;text-align:center;border-radius:5px;
            cursor:pointer;margin-top:30px;}
    </style>

</head>
<body>

    <input type='button' value="弹出" onclick="alert('我是按钮')">

    <!--鼠标划过按钮时调用mouseoverFn的函数-->
    <div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
    <div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>


    <script>
        //HTML事件 语法：<tag 事件=‘执行脚本’></tag>  功能：在HTML元素上绑定事件
        //在事件触发的函数中，this是对该DOM对象的引用
        function mouseoverFn(btn,bgColor){
            // 鼠标划过按钮时，按钮的背景变为红色
            btn.style.background=bgColor;
        }
        function mouseoutFn(btn,bgColor){
            btn.style.background=bgColor;
        }

    </script>
</body>
</html>